<template>
  <div class="home" >
    <div class="search">
      <button ><router-link :to="{name:'userApplyDetail',params:{id:-1}}">新增</router-link></button>
    </div>
    <div class="head">
      <input type="button" value="待审核" @click="statusChange(1)">
      <input type="button" value="已通过审核" @click="statusChange(2)">
      <input type="button" value="未通过审核" @click="statusChange(3)">
    </div>
    <div class="sort">
      <span @click="sortData(1)">按时间排序  |</span><span @click="sortData(2)">按名称A-Z</span>
    </div>
    <div>
      <vuserList :userInfo="userInfo" :searchInfo="searchInfo" :totalCount="totalCount" @pageSizeChange="pageSizeChangeHandler" @pageIndexChange="pageIndexChangeHandler" @freshFreezeList="searchUser()"></vuserList>
    </div>
  </div>
</template>

<script>
  import vuserList from './VuserDetailComponent.vue'
  import userService from './UserService.js'

  export default {
    data () {
      return {
        totalCount: 100,
        searchInfo: {
          'status': 1,
          'sort': 1,
          'page': 1,
          'page_size': 10
        },
        searchKeyWord: '',
        userInfo: []
      }
    },
    created: function () {
      this.searchUser()
    },
    components: {vuserList},
    methods: {
      // 切换状态展示 1.申请中 2.申请成功 3.未通过
      statusChange (status) {
        this.searchInfo.status = status
        this.searchUser()
      },
      // 当前展示页码变化
      pageIndexChangeHandler (pageIndex) {
        this.searchInfo.page = pageIndex
        this.searchUser()
      },
      // 每页展示数据条数改变
      pageSizeChangeHandler (pageSize) {
        this.searchInfo.page_size = pageSize
        this.searchUser()
      },
      // 1.时间降序 2.名称升序
      sortData (order) {
        this.searchInfo.sort = order
        this.searchUser()
      },
      searchUser () {
        var _this = this
        userService.getVuserApplyInfo(this.searchInfo).then(response => {
          // console.log(response)
          if (response && response.data && response.data.hasOwnProperty('code') && response.data.code === 0) {
            response = response.data
            _this.userInfo = response.data
            _this.totalCount = response.count
          } else {
            alert(response.data.msg)
          }
        }, response => {
          alert(response)
        })
      }
    }
  }
</script>

<style scoped>
  .head{
    height: 30px;
  }
  .sort{
    text-align: right;
  }
  .search{
    text-align: left;
  }

</style>
